<template>
  <div class="container">
    <div style="width:800px;margin:auto;">
      <h1>用户中心</h1>
      <button style="width:100px;height:40px;display:block;" @click="addUser">添加用户</button>
      <table border="1" style="width:100%; margin-top:20px">
        <thead>
          <th>ID</th>
          <th>用户名</th>
          <th>密码</th>
          <th>年龄</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="user in users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.age }}</td>
            <td>
              <router-link :to="{ name: 'edit', params: { id: user.id }}">编辑</router-link>|
              <router-link :to="{ name: 'delete', params: { id: user.id }}">删除</router-link>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        {
          id: 1,
          username: '张三',
          password: '123456',
          age: 18,
        },
        {
          id: 2,
          username: '李四',
          password: '123456',
          age: 20,
        },
        {
          id: 3,
          username: '王五',
          password: '123456',
          age: 22,
        },
      ],
    }
  },
  methods: {
    addUser() {
      this.$router.push({ name: 'add' })
    },
  },
  components: {},
}
</script>

<style scoped>
</style>
